.banner{
  width:100%;
  margin-top: 142px;
  img{
    vertical-align: middle;
    object-fit: cover;
    width: 100%;
  }
}
.main{
  margin: 20px 0 80px 0;
  .content{
    width:1500px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .lNav{
      width:270px;
      box-shadow: 0 0 10px rgba(101,101,101,.2);
      height: fit-content;
      .pt{
        background: url(../images/nav_bg.png) no-repeat;
        background-size: cover;
        height: 193px;
        color:white;
        font-size: 24px;
        font-weight: bolder;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .types{
        background: #F9F9F9;
        padding: 10px  0;
        a{
          display: block;
          padding: 15px 20px;
          text-align: center;
          color:#606060;
          transition: all 600ms;
          font-size: 22px;
          border-bottom: 1px solid rgba(168, 168, 168, .6);
          &:hover{
            background: #004097;
            color:white;
          }
        }
        :last-child{
          border-bottom: none;
        }
        .active{
          background: #004097;
          color:white;
        }
      }
    }
    .rc{
      width:calc(96% - 270px);
      .links{
        display: flex;
        a,p{
          color:#464646;
          font-size: 15px;
        }
        a{
          transition: all 600ms;
          &:hover{
            color:#004097;
          }
        }
      }
      .tab{
        margin: 30px 0;
        border-bottom: 1px solid #CBCBCB;
        .lt{
          margin-left: 25px;
          .cn{
            color:#101323;
            font-size: 24px;
            font-weight: bolder;
            position: relative;
            padding-bottom: 15px;
            &::after{
              content:'';
              display: block;
              position: absolute;
              left:0;
              bottom:0;
              width: 110px;
              height: 2px;
              background: #004097;
            }
          }
        }
      }
      .pager{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 30px;
        a{
          display: flex;
          align-items: center;
          .icon{
            width: 19px;
            height: 19px;
            background: #D2CECE;
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 600ms;
          }
          p{
            color:#666666;
            font-size: 14px;
            margin: 0 5px;
            transition: all 600ms;
          }
          &:hover{
            .icon{
              background: #0A4190;
            }
            p{
              color:#0A4190;
            }
          }
        }
      }
      .article_list{
        a{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 18px 25px;
          color:#464646;
          border-bottom: 1px solid #999999;
          transition: all 600ms;
          .pt{
            width:calc(98% - 140px);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            position: relative;
            padding-left: 20px;
            font-size: 23px;
            &::before{
              content:'';
              display: block;
              width: 5px;
              height: 5px;
              background: #000000;
              position: absolute;
              left:0;
              top:50%;
              transform: translateY(-50%);
              border-radius: 50%;
              transition: all 600ms;
            }
          }
          .time{
            width:140px;
            text-align: right;
            font-size: 23px;
          }
          &:hover{
            color:#004097;
            .pt{
              &::before{
                background: #004097;
              }
            }
          }
        }
      }
      .pager_Num{
        display: flex;
        justify-content: center;
        margin-top: 40px;
        a{
          display:block;
          width: 32px;
          background: #D8D8D8;
          color:#6F6F6F;
          line-height: 32px;
          margin: 0 5px;
          text-align: center;
          transition: all 600ms;
          &:hover{
            color:white;
            background: #004097;
          }
        }
        .active{
          color:white;
          background: #004097;
        }
      }
      .news_page{
        margin: 40px 0 60px 0;
        .t{
          color:#004097;
          font-size: 26px;
          text-align: center;
          font-weight: bold;
        }
        .tag{
          display: flex;
          margin-top:30px;
          padding-bottom: 5px;
          .author{
            display: flex;
            p{
              color:#606060;
              font-size: 18px;
            }
          }
          .time{
            color:#606060;
            font-size: 18px;
            margin-left: 20px;
          }
          border-bottom: 1px solid #CECECE;
        }
        .html{
          margin: 30px 0;
          p{
            margin-top: 15px;
            color:#606060;
            font-size: 20px;
            line-height: 1.6;
          }
          .pics{
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
            width: 100%;
            img{
              width: 24%;
              display: block;
              object-fit: cover;
            }
          }
        }
        .ft{
          color:#606060;
          font-size: 20px;
          border-bottom: 1px solid #CECECE;
          padding-bottom: 10px;
        }
        .btns{
          display: flex;
          margin-top: 10px;
          justify-content: space-between;
          .pager_btn{
            display: flex;
            a{
              display: flex;
              align-items: center;
              margin-right: 20px;
              img{
                display: block;
              }
              p{
                color:#606060;
                font-size: 20px;
                margin: 0 5px;
              }
            }
          }
          .set{
            display: flex;
            a{
              display: flex;
              margin-left: 20px;
              align-items: center;
              img{
                width: 20px;
              }
              p{
                color:#606060;
                font-size: 20px;
                margin-left: 5px;
              }
            }
          }
        }
      }
      .equipment_list{
        margin: 25px 25px 60px 25px;
        a{
          display: flex;
          justify-content: space-between;
          gap:1.5vw;
          margin-bottom: 25px;
          .pic{
            width: 25%;
            overflow: hidden;
            img{
              width: 100%;
              display: block;
              object-fit: cover;
              transition: all 600ms;
              height: 100%;
            }
          }
          .text{
            width:75%;
            .p1{
              color:#000000;
              font-size: 16px;
              font-weight: bold;
              transition: all 600ms;
              margin-top: 15px;
            }
            .des{
              color:#757575;
              font-size: 14px;
              margin-top: 15px;
              line-height: 2;
            }
          }
          &:hover{
            .pic{
              img{
                transform: scale(1.05);
              }
            }
            .text{
              .p1{
                color:#004097;
              }
            }
          }
        }
      }
      .people{
        margin: 50px 0 0 5px;
        display: flex;
        flex-wrap: wrap;
        .item{
          display: flex;
          justify-content: space-between;
          width: 30%;
          margin-left: 2%;
          margin-bottom: 50px;
          .pic{
            width: 154px;
            overflow: hidden;
            img{
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: all 600ms;
            }
          }
          .text{
            width:calc(95% - 154px);
            position: relative;
            .circle{
              position: absolute;
              left: -50px;
              top:-25px;
              z-index: -1;
              opacity: 0;
              transition: all 600ms;
            }
            .name{
              color:#004097;
              font-size: 18px;
            }
            .job{
              color:#383838;
              font-size: 14px;
              margin: 15px 0;
            }
            .info{
              color:#4C4C4C;
              font-size: 12px;
              border-bottom: 1px solid #4C4C4C;
              padding-bottom: 8px;
              line-height: 1.6;
            }
            a{
              border: 1px solid #004097;
              font-size: 12px;
              padding: 8px  15px;
              position: absolute;
              right:0;
              bottom:0;
              transition: all 600ms;
              color:#004097;
            }
          }
          &:hover{
            .pic{
              img{
                transform: scale(1.05);
              }
            }
            .text{
              .circle{
                opacity: 1;
              }
              a{
                background-color: #004097;
                color:white;
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1500px){
.main{
  .content{
    width:90%;
    .rc{
      .people{
        justify-content: space-between;
        margin: 25px;
        .item{
          width: 48%;
          margin-left: 0;
          .text{
            .name{
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}
}
@media screen and (max-width: 1200px){
  .banner{
    margin-top: 60px;
    img{
      height:300px;
    }
  }
  .main{
   margin: 0 0 40px 0;
    .content{
      flex-direction: column;
      .lNav{
        width:100%;
        transform:translateY(0);
        display: none;
        .pt{
          padding: 30px 20px;
          font-size: 20px;
        }
        .types{
          a{
            font-size: 18px;
          }
        }
      }
      .rc{
        width:100%;
        margin-top: 20px;
        .links{
          flex-wrap: wrap;
          a,p{
            font-size: 12px;
          }
        }
        .tab{
          margin: 15px 0;
          .lt{
            margin-left: 15px;
            .cn{
              font-size: 20px;
              padding-bottom: 10px;
            }
          }
        }
        .article_list{
          a{
            padding: 10px 15px;
            .pt{
              font-size: 14px;
              padding-left: 15px;
              width: calc(98% - 100px);
            }
            .time{
              font-size: 14px;
              width: 80px;
            }
          }
        }
        .pager_Num{
          margin-top: 20px;
        }
        .news_page{
          margin: 20px 0 30px 0;
          .t{
            font-size: 18px;
          }
          .tag{
            margin: 15px 0;
            .author{
              p{
                font-size: 16px;
              }
            }
            .time{
              font-size: 16px;
            }
          }
          .html{
            margin: 15px 0;
            p{
              font-size: 16px;
            }
          }
          .ft{
            font-size: 18px;
          }
          .btns{
            .pager_btn{
              a{
                p{
                  font-size: 14px;
                }
              }
            }
            .set{
              a{
                p{
                  font-size: 14px;
                }
              }
            }
          }
        }
        .equipment_list{
          margin: 20px 15px 30px 15px;
          a{
            flex-direction: column;
            .pic{
              width: 100%;
            }
            .text{
              width: 100%;
              .p1{
                margin-top: 10px;
              }
              .des{
                margin-top: 10px;
              }
            }
          }
        }
        .people{
          margin: 25px 15px;
          .item{
            width: 100%;
            margin-bottom: 20px;
            .pic{
              width: 120px;
              img{
                height: 180px;
              }
            }
            .text{
              width: calc(95% - 120px);
              .circle{
                display: none;
              }
            }
          }
        }
      }
    }
  }
}
